<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>后台管理模板页</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/ionicons.min.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/grade-details.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        #questions-container {
            margin-top: 20px;
        }

        .question {
            margin-bottom: 10px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 5px;
        }

        .question-text {
            font-weight: bold;
        }

        .answer-text {
            font-weight: bold;
        }

        .score-input {
            margin-right: 10px;
            /* 给提交按钮留出空间 */
            width: 100px;
            /* 或者其他合适的宽度 */
        }


        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        .score-container {
            text-align: right;
            /* 或者 center, 取决于您希望它们如何对齐 */
            margin-top: 20px;
            /* 根据需要调整间距 */
        }

        button.btn-primary {
            padding: 10px 20px;
            /* 确保按钮大小合适 */
        }
    </style>
</head>

<body class="row">

    <!-- left area -->
    <div class="left col-md-2">
        <aside>
            <div class="welcome t-c">
                <strong>抱团取暖在线考试系统</strong>
            </div>
            <ul class="f-16">

                <a href="student-manage" class="side-menu-color">
                    <li>
                        <i class="icon ion-person-stalker f-18 m-r-10"></i> 学员管理
                        <span class="icon ion-android-radio-button-off f-r f-13"></span>
                    </li>
                </a>
                <a href="subject-manage" class="side-menu-color">
                    <li>
                        <i class="icon ion-navicon-round f-18 m-r-10"></i> 题库管理
                        <span class="icon ion-android-radio-button-off f-r f-13"></span>
                    </li>
                </a>

                <a href="grade-details" class="side-menu-color">
                    <li>
                        <i class="icon ion-navicon-round f-18 m-r-10"></i> 成绩明细
                        <span class="icon ion-android-radio-button-off f-r f-13"></span>
                    </li>
                </a>

                <a href="exam-manage" class="side-menu-color">
                    <li>
                        <i class="icon ion-navicon-round f-18 m-r-10"></i> 添加考试
                        <span class="icon ion-android-radio-button-off f-r f-13"></span>
                    </li>
                </a>
                <a href="exam-grade" class="side-menu-color">
                    <li>
                        <i class="icon ion-navicon-round f-18 m-r-10"></i> 考试成绩
                        <span class="icon ion-android-radio-button-off f-r f-13"></span>
                    </li>
                </a>
                <a href="check-paper" class="side-menu-color">
                    <li>
                        <i class="icon ion-ios-locked-outline f-18 m-r-10"></i> 试卷批改
                        <span class="icon ion-android-radio-button-off f-r f-13"></span>
                    </li>
                </a>
            </ul>
        </aside>
    </div>
    <!-- left area end -->

    <!-- right area -->
    <div class="right col-md-10 f-r">
        <header>
            <span class="notice-body"><i class="icon ion-alert"></i> 公告：</span><span id="notice">本网站由大帅比陈元书倾情制作!</span>
            <span id="userName" class="m-r-10">欢迎！ <a href="##"> 退出</a></span>
        </header>
        <main>
            <div class="heading clearfix">
                <h4 class="f-l">试卷批改 <small>试卷作答批改</small></h4>
                <ol class="breadcrumb f-r">
                    <!-- <li><a href="grade-details">成绩管理</a></li>
	            <li class="active">成绩管理</li> -->
                </ol>
            </div>
            <!-- top：sreach-infors and operations -->
            <div class="opr  m-c clearfix">
                <!--  search infors  -->
                <div id="describe-container"></div>

                <div id="questions-container">

                    <!-- 题目和打分框将通过JavaScript动态添加 -->
                </div>
                <div id="score-container" class="score-container mt-3"></div>

                <div class="question">
                    <input type="text" class="score-input">
                    <br>
                    <button onclick="submitScores()">提交分数</button>



                    <!--   operations   -->
                </div>

                <!--grade-table-->

        </main>
        <footer>
            <strong class="m-l-20">Copyright © 2024 <a href="https://gitee.com/YIFan-Support-Team">抱团取暖</a>.</strong>
            All rights reserved.
        </footer>
        <!-- right area end -->
    </div>
    <div id="no-more-questions" class="alert alert-info" style="display: none;">题目已全部批改完毕</div>
    <button onclick="submitScores()" id="submitBtn" class="btn btn-primary"> 下一题</button>
    <script>
        const apiUrl = '/check-paper/getPaper';
        const submitScoreUrl = '/check-paper/getScore';

        let currentQuestionIndex = 0;
        let questionsData = [];








        function loadQuestions() {
            fetch(apiUrl)
                .then(response => response.json())
                .then(data => {
                    // 假设你想存储整个数组  
                    const storedData = JSON.stringify(data);
                    localStorage.setItem('questionsData', storedData);
                    const describeContainer = document.getElementById('describe-container');
                    const questionsContainer = document.getElementById('questions-container');
                    questionsContainer.innerHTML = '';
                    describeContainer.innerHTML = '';
                    // 如果你想处理数组中的每个元素  
                    data.forEach(question => {
                        console.log(question.text, question.code, question.studentID);
                        const questionElement = document.createElement('div');
                        questionElement.textContent = `${question.text}`; // 假设有title字段  
                        questionsContainer.appendChild(questionElement);
                        // 这里可以根据需要处理每个问题  
                        const describeElement = document.createElement('div');
                        describeElement.textContent = `${question.describe}`;
                        describeContainer.appendChild(describeElement);
                    });

                    // 如果数组非空，则加载下一个问题（假设这个函数存在）  
                    if (data.length > 0) {
                        loadNextQuestion();
                    } else {
                        alert('没有题目数据！');
                    }
                })
                .catch(error => {
                    console.error('加载题目数据时出错:', error);
                    alert('题目已全部批改完毕！');
                });
        }
        function loadNextQuestion() {
            const storedData = localStorage.getItem('questionsData');
            if (storedData) {
                const questionsData = JSON.parse(storedData);
                console.log(questionsData);
                // 现在你可以使用questionsData数组了  
            }

            if (currentQuestionIndex >= questionsData.length) {
                document.getElementById('no-more-questions').style.display = 'block';
                document.getElementById('submitBtn').style.display = 'none';
                return;
            }

            const question = questionsData[0];
            const container = document.getElementById('questions-container');

            // 清空当前容器内容（对于单题显示是必需的）  
            container.innerHTML = '';

            // 创建并添加新题目到页面  
            const questionDiv = document.createElement('div');
            questionDiv.classList.add('question');

            const questionText = document.createElement('p');
            questionText.textContent = question.text;

            const scoreInput = document.createElement('input');
            scoreInput.type = 'number';
            scoreInput.classList.add('score-input');
            scoreInput.placeholder = '输入分数';

            questionDiv.appendChild(questionText);
            questionDiv.appendChild(document.createElement('br'));
            questionDiv.appendChild(scoreInput);
            container.appendChild(questionDiv);

            // 显示提交按钮  
            document.getElementById('submitBtn').style.display = 'inline-block';
        }

        function submitScores(questionCode, studentId) {
            const scoreInput = document.querySelector('.score-input');
            const score = parseInt(scoreInput.value, 10);

            if (isNaN(score)) {
                alert('请输入有效的分数！');
                return;
            } else if (score < 0 || score > 10) {
                alert('请输入有效的分数！');
                return;
            }

            // 从localStorage获取所有题目数据，但这里我们只需要当前要提交的题目数据（假设有逻辑判断）  
            // 这里为了示例，我们假设 questionCode 和 studentId 足以定位到具体的数据  
            // 但在实际应用中，你可能需要遍历存储的数据来找到对应的题目  

            // 示例：这里直接构建表单数据  
            const storedData = localStorage.getItem('questionsData');
            const data = JSON.parse(storedData);
            const firstQuestion = data[0];
            const formData = new URLSearchParams();
            formData.append('score', score);
            formData.append('questionCode', firstQuestion.code);
            formData.append('studentId', firstQuestion.studentID);

            fetch(submitScoreUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: formData.toString()
            })
                .then(response => response.json())
                .then(data => {
                    console.log('Server response:', data);
                    location.reload();
                })
                .catch(error => {
                    console.error('提交分数时出错:', error);
                    alert('提交分数失败，请稍后再试！');
                });
        }
        window.onload = loadQuestions;

        // 为提交按钮添加点击事件监听器  
        document.getElementById('submitBtn').addEventListener('click', submitScores);  
    </script>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/grade-details.js"></script>
</body>

</html>